AI

info

Free accounts get a limited number of Visual AI chats each day and month. Phoenix Code Pro removes the limits and adds the Claude Code CLI and Codex CLI inside the panel. See Free Account Limits.

The AI panel puts a coding assistant inside the editor. Ask it to build a page, fix a bug, or restyle a section. It reads your files, edits them, and checks its own work in the Live Preview. Every change it makes can be undone with one click.

AI is available only in the desktop app.

Three Ways to Work

The panel gives you three assistants to choose from. Pick one on the start screen, or switch with the dropdown in the panel header.

• Visual AI: The built-in chat, powered by Claude Code. It shows every step as a card, keeps a restore point for each change, and works hand in hand with the Live Preview. This is what most of this section describes.
• Claude Code CLI and Codex CLI: The real command-line tools from Anthropic and OpenAI, running in a terminal inside the panel. They are connected to the editor, so they can see your open files and use the Live Preview too. See Claude Code CLI and Codex CLI.

What You Can Do

• Chat about your project: The AI knows which file you are in, what you have selected, and what the Live Preview shows. Attach files, folders, and screenshots for more context.
• Ask about an element: Click Ask AI on a selected element, a Markdown selection, or a code selection. A screenshot and the source location go along with your question.
• See options, not just text: The AI can reply with mockups, buttons, and controls you can try right in the chat.
• Decide how much it can do: Four permission modes, from a plan you approve first to full autonomy.
• Review and undo changes: Every edit shows a diff. Roll back any response with Undo or Restore to this point.
• Find photos: Ask for pictures and the AI searches Unsplash, shows the results in the chat, and adds the one you pick to the page.
• Watch usage and cost: Tokens and cost for the current chat, plus a usage calendar on the start screen.
• Pick a model or provider: Switch models mid-chat, set how hard the model thinks, or bring your own API key and endpoint.

In This Section

• Setup: Sign in and connect your Claude account.
• Chatting: The start screen, sending messages, context, attachments, and session history.
• Permission Modes: Plan Mode, AI Edit Mode, Auto, and Allow Everything.
• Reviewing and Undoing Changes: Diffs, restore points, and undo.
• Live Preview and Editor: Ask about elements, Markdown, and code, and answer questions the AI asks in the preview.
• Claude Code CLI and Codex CLI: Run the command-line tools inside the panel.
• Image Search: Find and use photos from Unsplash.
• Usage and Cost: Tokens, cost, and the usage calendar.
• Models and Providers: Choose a model or add a custom provider.
• Turning AI Off: Remove AI from the editor completely.